/* 搜索框 */
.category-search-box {
	overflow: hidden;
	position: relative;
	height: 120rpx;
	.category-search-btn {
		position: absolute;
		z-index: 5;
		right: 60rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: $ns-font-size-lg + 4rpx;
	}
	input {
		height: 70rpx;
		width: 80%;
		display: block;
		background-color: #fff;
		border-radius: 6rpx;
		padding: 0 30rpx;
		margin: auto;
		font-size: $ns-font-size-base;
		margin-top: 24rpx;
	}
}

/* 分类内容 */
.category-content {
	display: flex;
	height: calc(100vh - 94px);
	/* #ifdef MP */
	height: 100vh;
	/* #endif */
	&.modular-one {
		height: calc(100vh - 94px - 120rpx);
		/* #ifdef MP */
		height: calc(100vh - 120rpx);
		/* #endif */
	}
	&.modular-two {
		margin-top: 20rpx;
		height: calc(100vh - 94px - 20rpx);
		/* #ifdef MP */
		height: calc(100vh - 20rpx);
		/* #endif */
	}
}

/* 分类侧边导航 */
.category-side-nav {
	width: 180rpx;
	background-color: #fff;
	text-align: center;
	.side-nav-item {
		padding: 0 20rpx;
		overflow: hidden;
		display: block;
		width: 180rpx;
		height: 100rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 100rpx;
		box-sizing: border-box;
		&.nav-select {
			position: relative;
			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 50rpx;
				width: 6rpx;
				background-color: $base-color;
			}
		}
	}
}

.catergory-details {
	width: 550rpx;
	margin-left: 20rpx;
}

/* 一级分类*/
.catergory-temple-one {
	position: relative;
	width: 550rpx;
	height: calc(100vh - 94px - 120rpx);
	/* #ifdef MP */
	height: calc(100vh - 120rpx);
	/* #endif */
	background-color: #fff;
	padding-top: 120rpx;
	box-sizing: border-box;
	.temple-one-item {
		display: flex;
		padding: 20rpx;
		.item-pic {
			margin-right: 20rpx;
			width: 132rpx;
			height: 132rpx;
			image {
				width: 132rpx;
				height: 132rpx;
			}
		}
		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 360rpx;
			.item-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.item-operation {
				display: flex;
				justify-content: space-between;
				font-size: $ns-font-size-sm;
				padding: 0 10rpx;
			}
		}
	}
}
/* 一级分类中的筛选 */
.category-condition {
	position: absolute;
	z-index: 2;
	right: 0;
	display: flex;
	height: 100rpx;
	width: 552rpx;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	text {
		flex-grow: 1;
		font-size: $ns-font-size-base;
		text-align: center;
	}
	.price {
		position: relative;
		&:after {
			position: absolute;
			content: '';
			top: 12rpx;
			right: 18rpx;
			display: block;
			width: 6rpx;
			height: 6rpx;
			border: 2rpx solid transparent;
			border-top-color: $ns-text-color-black;
			border-left-color: $ns-text-color-black;
			transform: rotate(45deg);
		}
		&:before {
			position: absolute;
			content: '';
			bottom: 14rpx;
			right: 18rpx;
			display: block;
			width: 6rpx;
			height: 6rpx;
			border: 2rpx solid transparent;
			border-top-color: $ns-text-color-black;
			border-left-color: $ns-text-color-black;
			transform: rotate(-135deg);
		}
	}
}
.price-asc:after {
	border-top-color: $base-color !important;
	border-left-color: $base-color !important;
}
.price-desc:before {
	border-top-color: $base-color !important;
	border-left-color: $base-color !important;
}

/* 二级分类 */
.catergory-temple-two {
	padding: 20rpx;
	width: 550rpx;
	height: calc(100vh - 94px - 20rpx);
	/* #ifdef MP */
	height: calc(100vh - 20rpx);
	/* #endif */
	background-color: #fff;
	box-sizing: border-box;
	.temple-two-item {
		float: left;
		width: 150rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		&:nth-child(3n + 3) {
			margin-right: 0;
		}
	}
	.item-pic {
		width: 150rpx;
		height: 150rpx;
		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
	.item-name {
		display: block;
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.no-img {
			border: 2rpx solid $base-color;
			color: $base-color;
			border-radius: 8rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
		}
	}
}

/* 三级分类 */
.catergory-temple-three {
	width: 530rpx;
	height: calc(100vh - 94px);
	/* #ifdef MP */
	height: 100vh;
	/* #endif */
	.temple-three-item {
		&:first-of-type {
			margin-top: 20rpx;
		}
		padding: 0 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.item-title {
			display: block;
			height: 70rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: $ns-font-size-base;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.temple-three-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 16rpx;
		}
		.temple-three-cell {
			width: 75px;
			margin-right: 20rpx;
			margin-bottom: 10px;
			&:nth-child(3n + 3) {
				margin-right: 0;
			}
		}
		.item-pic {
			width: 150rpx;
			height: 150rpx;
			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
		.item-name {
			display: block;
			overflow: hidden;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			&.no-img {
				border: 2rpx solid $base-color;
				color: $base-color;
				border-radius: 8rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
			}
		}
	}
}
